<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CartoCSS_hightlight</title>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
        }

        #map {
            position: relative;
            height: 553px;
            border: 1px solid #3473b7;
        }
        #layerItems{
            background-color: white;
            color: #0083cb;
            padding-left: 0;
            border: 2px solid #0083cb;
        }
        #layerItems:before{
            content: '请选择图层：';
            background-color: #0083cb;
            color: white;
            list-style: none;
            padding-top: 1px;
            font-size: 19px;
        }
        #layerItems li{
            list-style: none;
            padding: 5px;
            font-size: 17px;
        }
        #layerItems li:hover{
            background-color: #0083cb;
            color: white;
        }
    </style>
    <script type="text" id="textData">
        @color:#ee9900;
        *{
        line-color:@color;
        line-opacity:1;
        line-width:3;
        polygon-fill:@color;
        polygon-opacity:0.4;
        text-fill:#000000;
        }
    </script>
    <script type="text/javascript">
        var map, layer, lat, lon, geolocate, layerItems,infowin,lonLat,geometryInfo,featureInfoes, host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";

        function init() {
            if(!document.createElement('canvas').getContext) {
                alert('您的浏览器不支持 canvas，请升级');
                return;
            }
            layerItems = document.getElementById('layerItems');
            map = new SuperMap.Map("map", {controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.MousePosition(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            var hightLightCartoCss=document.getElementById("textData").text;
            layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true,returnAttributes:true},{useLocalStorage:true,highLightCartoCss:hightLightCartoCss});
            layer.events.on({"layerInitialized": addLayer});

            map.events.on({'click':function(evt){
                closeInfoWin();
                layer.unHightlightFeatures();
                featureInfoes = layer.getFeature(evt.xy.x,evt.xy.y);
                console.log(featureInfoes);
                if(featureInfoes && featureInfoes.length > 0){
                    while (layerItems.firstChild) {
                    layerItems.removeChild(layerItems.firstChild);
                }
                layerItems.style.top = evt.clientY + 'px';
                layerItems.style.left = evt.clientX + 'px';
                for(var i=0,len=featureInfoes.length;i<len;i++){
                    var li = document.createElement('li');
                    li.innerHTML = featureInfoes[i].cartoLayer.layerName;
                    li.setAttribute('data-index',i);
                    layerItems.appendChild(li);
                    if(i !== (len-1)){
                        li.style.borderBottom = '1px solid';
                    }
                    li.onclick = liClickHandle;
                }
                layerItems.style.display = 'block';
                }else{
                    layerItems.style.display = 'none';
                }
                
            },
            'rightclick':function(){
                layerItems.style.display = 'none';
            },
            'move':function(){
                layerItems.style.display = 'none';
            }});
        }

        function liClickHandle(evt){
            var evt = window.event ||evt;
            var target = evt.srcElement || evt.target;
            evt.stopPropagation();
            var index = +target.dataset.index;
            layer.highlightFeatures(featureInfoes[index]);
            var lonlat = map.getLonLatFromViewPortPx(featureInfoes.xy);
                openPopup(featureInfoes[index].feature,lonlat);
            layerItems.style.display = 'none';
        }


        function addLayer() {
            map.addLayers([layer]);
            var center = new SuperMap.LonLat(0,0);
            map.setCenter(center, 1);
        }

        //定义mouseClickHandler函数，触发click事件会调用此函数
        function openPopup(feature,lonlat){
            var key = 'NAME';
            var val = feature && feature.attributes && feature.attributes[key];
            if(!val){
                key = 'SmID';
                val = feature && feature.attributes && feature.attributes[key];
            }
            var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
            contentHTML += key+"："+ val;
            contentHTML += "</div>";

            //初始化FramedCloud类
            framedCloud = new SuperMap.Popup.FramedCloud(
                    "chicken",
                    lonlat,
                    null,
                    contentHTML,
                    null,
                    true,
                    null,
                    true
            );

            infowin = framedCloud;
            map.addPopup(framedCloud);

        }

        function closeInfoWin(){
            if(infowin){
                try{
                    infowin.hide();
                    infowin.destroy();
                }
                catch(e){}
            }
        }

    </script>
</head>
<body onload="init()">
<div id="map"></div>
<button onclick="layer.unHightlightFeatures();closeInfoWin();">取消高亮</button>
<ul id='layerItems' style="display: none;position: absolute;">
    
</ul>
<script src='../libs/SuperMap.Include.js'></script>
</body>
</html>
